<template>
<div id="index" @contextmenu.prevent="">
		<div class="push-a" :class="{hide:isHide}">
			<div class="push-aa" @click="isHide=true" ><span>关闭</span></div>
			<a href="myplan.html">
			<div class="push-ab">
				你有<b>2</b>条未完成的计划，请尽快前往处理！
			</div>
			</a>
		</div>
		<!--电量-->
		<div class="logo"></div>
		<!--电量和时间模板-->
		<Battery></Battery>
		<!--标题-->
		<Title v-bind:hasHelp="true" v-bind:title="'维修保障设备'"></Title>
		<div class="container">
			<div class="col-l">
				<!--旋转轮盘-->
				<!--<core v-bind:isActive="isActive"></core>-->
				<Core @selected="selected"></Core>
			</div>
			<div class="col-r">
			  <!--转盘索引和右侧切换一致-->
			  <div class="col-r-hide" v-for="(data,index) in container.datas" :key="data.id" :class="{active:isActive===index}">
				<div class="col-ra">{{data.title}}</div>
				<!--如果有按钮添加按钮-->
				<div class="col-button" v-if="data.button" >
					<a href="tool-add.html" class="button-add">添 加</a>
					<a href="#" class="button-qx" style="display:none">取 消</a>
				</div>
				<div class="col-rb">
				  <div class="col-rb-pub">
						<!--普通列表-->
					  	<div class="col-rb-bg" v-for="da in data.datas" :key="da.id" v-if="!data.swiper">
					  		<router-link :to="da.url" tag="span"><img :src="'/static/images/'+da.img" />
					   	  	<p>{{da.title}}</p></router-link>
					  	</div>
						<!--分页列表显示-->
						<swiper :options="swiperOption"  v-if="data.swiper" style="height:510px">
						　　<swiper-slide  v-for="dat in data.swipers" :key="dat.id">
								<!--每列显示1条-->
						　　　　<div class="col-rb-bg" v-for="da in dat.datas" :key="da.id" v-if="data.level==1" >
									<router-link :to="{ name: 'Ietm', params: { id: da.id,title:da.title,applic:da.applic }}" tag="li">
									<img src="/static/images/icon-06.png" />
									<p>{{da.title}}</p>
									</router-link>
								</div>
								<!--每列显示2条-->
								<div class="col-rb-bgl" v-for="da in dat.datas" :key="da.id" :class="{'col-rb-bgll':index%2==1}" v-if="data.level==2">
									<img :src="'/static/images/'+da.img" />
									<p>{{da.title}}</p>
									<div class="col-del"></div>
								</div>  
						　　</swiper-slide>
						　　<div class="swiper-pagination" slot="pagination"></div>
						</swiper>
				  </div>
				</div>
			  </div>
			</div>
		</div>
</div>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import Core from '@/components/Core'
import Battery from '@/components/Battery'
import Title from '@/components/Title'

export default {
  name: 'Index',
   components:{
	Core,//"Core":Core
	Battery,
	Title
  },
  data: function () {
      return {
			isHide:false,
			isActive:0,
			swiperOption: {
				pagination: {
					el: '.swiper-pagination',
				}  
            },
			container: {
				datas: [
						{id:'1',title:'交互式培训系统',swiper:true,level:1,show:true,
							 swipers: [{id:'11',datas:[
														{id:'111',url:'interactive.html',img:'icon-06.png',title:'大系统'},
														{id:'112',url:'interactive.html',img:'icon-06.png',title:'分系统1'},
														{id:'113',url:'interactive.html',img:'icon-06.png',title:'分系统2'},
														{id:'114',url:'interactive.html',img:'icon-06.png',title:'分系统3'},
														{id:'115',url:'interactive.html',img:'icon-06.png',title:'分系统4'},
														{id:'116',url:'interactive.html',img:'icon-06.png',title:'分系统5'}					
											 		]}
									]
									},
						{id:'2',title:'故障诊断',swiper:false,
							datas:[
									{id:'71',url:'interactive.html',img:'icon-01.png',title:'装备日志'},
									{id:'72',url:'interactive.html',img:'icon-02.png',title:'故障手工录入'},
									{id:'73',url:'zbdzll.html',img:'icon-03.png',title:'装备电子履历'},
									{id:'74',url:'interactive.html',img:'icon-04.png',title:'装备采集与监控'},
									{id:'75',url:'spare.html',img:'icon-05.png',title:'备件管理'}
							]
						},
						{id:'3',title:'个人中心',swiper:false,
							 datas:[
										{id:'61',url:'plan.html',img:'icon-12.png',title:'计划管理'},
										{id:'62',url:'user.html',img:'icon-13.png',title:'用户管理'},
										{id:'63',url:'permissions',img:'icon-14.png',title:'权限管理'},
										{id:'64',url:'data-backup.html',img:'icon-15.png',title:'数据备份融合'},
										{id:'65',url:'log.html',img:'icon-16.png',title:'日志'},
										{id:'66',url:'self-diagnosis.html',img:'icon-17.png',title:'自诊断'}
									]
							},
						{id:'4',title:'系统设置',swiper:false,level:1,
							 datas:[
										{id:'51',url:'#',img:'icon-18.png',title:'网络设置'},
										{id:'52',url:'#',img:'icon-19.png',title:'安全加密设置'},
										{id:'53',url:'#',img:'icon-20.png',title:'外设接入授权设置'},
										{id:'54',url:'#',img:'icon-21.png',title:'恢复设备出厂设置'},
										{id:'55',url:'#',img:'icon-22.png',title:'软件手动自毁'},
										{id:'56',url:'#',img:'icon-23.png',title:'装备日志备份'},
										{id:'57',url:'data-clean',img:'icon-15.png',title:'数据库清理与备份'}
							]
							},
						{id:'5',title:'用户文档',swiper:false,
							 datas:[
									    {id:'41',url:'documentation.html',img:'icon-37.png',title:'法规规范文档'}
									]
							},
						{id:'6',title:'常用工具',swiper:true,level:2,button:true,
							 	swipers:[
											{id:'31',datas:[
												{id:'311',url:'#',img:'icon-24.png',title:'装备工作原理计算公式'},
												{id:'312',url:'#',img:'icon-25.png',title:'装备部署示意软件'},
												{id:'313',url:'#',img:'icon-26.png',title:'指南针'},
												{id:'314',url:'#',img:'icon-27.png',title:'手电筒'},
												{id:'315',url:'#',img:'icon-28.png',title:'文字处理软件'},
												{id:'316',url:'#',img:'icon-29.png',title:'翻译软件'},
												{id:'317',url:'#',img:'icon-30.png',title:'视频播放器'},
												{id:'318',url:'#',img:'icon-31.png',title:'图形处理软件'},
												{id:'319',url:'#',img:'icon-32.png',title:'地图'},
												{id:'3110',url:'#',img:'icon-33.png',title:'课件制作器'},
												{id:'3111',url:'#',img:'icon-34.png',title:'军用单机杀毒软件'},
												{id:'3112',url:'#',img:'icon-35.png',title:'视频影像工具'}	
											]},
											{id:'32',datas:[
												{id:'321',url:'questions.html',img:'icon-36.png',title:'记事本'}
											]}
										]
						},
						{id:'7',title:'考试系统',swiper:false,
							 datas: [
											{id:'21',url:'/exam',img:'icon-07.png',title:'试题管理'},
											{id:'22',url:'paper.html',img:'icon-08.png',title:'试卷管理'},
											{id:'23',url:'interactive.html',img:'icon-11.png',title:'成绩报表'},
											{id:'24',url:'interactive.html',img:'icon-09.png',title:'参加考试'},
											{id:'25',url:'interactive.html',img:'icon-10.png',title:'我的成绩'}
								]	
						}	
						]
					}
			
      	}
  },
  methods:  {
	  selected:function(index){
		  this.isActive=index;
	  }

  },
  created(){
	  
	  //获取交互式培训后台数据
	  this.axios.get("/ietm/data/1").then(res=>{
		  var pms=res.data.pms;
		  var pmsLen = pms.length;
		  var j=0;
		  if(pmsLen>6){
			for(var i = 0; i < pmsLen; i=6+i) {
			this.container.datas[0].swipers[j].datas=pms.slice(i,(i+6)<pmsLen?(i+6):pmsLen);
			j++;
			} 
		  }else{
			this.container.datas[0].swipers[0].datas=pms;
		  }
	  }).catch(err=>{//后台数据请求有错
		  alert("数据有误！")
	  });
  }
}
</script>

<style scoped>
@import url('../assets/css/index.css');
@import url('../assets/css/animation.css');
</style>
<style>
.hide{display: none}
</style>
